home *** CD-ROM | disk | FTP | other *** search
/ SuperHack / SuperHack CD.bin / MISC / HTMLQREF.ZIP / HTMLQREF.TXT
Text File  |  1996-03-16  |  19KB  |  383 lines
  1. Subject: *** HTML QuickREFERENCE ***
  2. Date: 17 Mar 1995 04:04:50 GMT
  3. X-Newsreader: TIN [version 1.2 PL2]
  4.  
  5. For all those in need, here is a quick reference of the HTML language
  6. to get you started.
  7.  
  8. HyperText Mark-up Language Quick Reference                        December 1994
  9.  
  10.  
  11.     This is yet another HTML quick reference, containing advice on how to
  12.    write correct HTML, as well as practical tips.  It is mainly based on
  13.    version 1.22 of the HTML 2.0 standard (including some HTML3 extensions
  14.    which are already implemented by a number of browsers; the extensions
  15.    are all clearly labeled as such).  Some material is from another quick
  16.    reference by Tom Fine.  This is not necessarily a good guide for
  17.    absolute beginners.
  18.  
  19.  
  20. General:
  21.  
  22.     The HTML language represents hypertext data, for use as part of the
  23.  World-wide Web.  HTML is one specific language defined using the general SGML
  24.  meta-language.  HTTP is a transport protocol, used to deliver HTML documents
  25.  (as well as other types of files) over networks.
  26.  
  27.  
  28. Syntax:
  29.  
  30.   <tagname attribute=value attribute="Value"> contained stuff </closingtag>
  31.  
  32.     A "tag" is everything between the `<' and `>' characters.  The tag name
  33.  should come directly after the `<' character, with no intervening whitespace.
  34.  Tag names and tag attributes are case-insensitive, as are the values of
  35.  certain tag attributes as well.  If an attribute value contains whitespace,
  36.  or any characters other than a-z, A-Z, `.' or `-' it should be quoted.  For
  37.  this reason, most URL's should be quoted (the fact that some implementations
  38.  may tamper with the alphabetic case of unquoted attribute values means that
  39.  it is good style to quote all URL's).  Some attributes (such as COMPACT) do
  40.  not need a value.
  41.  
  42.     An "element" is made up of the opening tag, its matching closing tag, and
  43.  everything that contained between the two (which can include other tags, and
  44.  also text which is not part of any tag): <X>Stuff In Element</X>.  The
  45.  closing tags for some elements are optional (as noted below), and some tags
  46.  can _not_ have a corresponding closing tag (namely, <BR>, <HR>, <IMG>,
  47.  <INPUT>, the non-<TITLE> tags in <HEAD>...</HEAD>, and the SGML pseudo-tags
  48.  <!DOCTYPE> and <!-- -->).
  49.  
  50.     Details of text formatting in the HTML source (such as the position of
  51.  linebreaks) are not preserved when the document is displayed, and extra
  52.  whitespace is ignored.
  53.  
  54.  
  55. Overall Document Tags:
  56.  
  57.    <!DOCTYPE ...>            SGML declaration; if it is used, it comes first in
  58.                                 the file.  (If you don't know what this is,
  59.                                 don't worry about it.)
  60.  
  61.    <HTML> ... </HTML>        Encloses the entire document (except <!DOCTYPE>)
  62.                                 and identifies it as HTML.  The optional VERSION
  63.                                 attribute specifies the HTML version used.
  64.  
  65.    <HEAD> ... </HEAD>        Encloses the header (<TITLE>, <LINK>, etc.).
  66.  
  67.    <BODY> ... </BODY>        Encloses the body of the document.
  68.  
  69.    All other tags besides these, and all text which is not part of a tag,
  70.  should be contained within a <HEAD>...</HEAD> or <BODY>...</BODY> element,
  71.  which should be in turn contained within the overall <HTML>...</HTML>.
  72.  
  73.  
  74. Head Tags:
  75.  
  76.    <TITLE> ... </TITLE>      The title of the document; should not contain any
  77.                                 other tags.  A title is OBLIGATORY in
  78.                                 <HEAD>...</HEAD>!  There should be no non-tag
  79.                                 text in <HEAD>...</HEAD> except that which is
  80.                                 contained in <TITLE>...</TITLE>.  The title
  81.                                 is used to index the document by Web searchers,
  82.                                 so that it should _not_ be something which is
  83.                                 cryptic when out of context, like "Intro".
  84.                                 (See also <H1>...</H1> below.)
  85.  
  86.    <LINK HREF="URL">         Specifies general relationships of this document
  87.                                 to other resources.  The type of relationship
  88.                                 is described by a REL= or REV= attribute (other
  89.                                 attributes are URN=, TITLE=, and METHODS=).
  90.                                 This is not generally implemented yet, except
  91.                                 for <LINK REV="made" HREF="mailto:...">, used
  92.                                 to specify the e-mail address of the author.
  93.  
  94.    <BASE HREF="URL">         Specifies context-independent URL of current file.
  95.    <NEXTID N="...">          Next anchor name to use (for HTML editors).
  96.    <META CONTENT="...">      Provides HTTP header info (other attributes are
  97.                                 NAME= and HTTP-EQUIV=).
  98.    <ISINDEX>                 Document is searchable index.  (This tag can also
  99.                                 appear in <BODY>...</BODY> element.)
  100.  
  101. Body tags:
  102.  
  103.  High-level tags:
  104.  
  105.    <Hn> ... </Hn>            Section headings; "n" ranges from 1 (highest-level)
  106.                                 to 6 (least important); <H4>-<H6> are too small
  107.                                 to be usable in the default configuration of
  108.                                 some versions of NCSA Mosaic.  Since the TITLE
  109.                                 in the HEAD element is displayed on the window
  110.                                 bar (and should be context-independent), the
  111.                                 <H1>...</H1> element is generally used for the
  112.                                 actual within-document title.
  113.  
  114.    <BLOCKQUOTE> ...          Encloses a block of text that is a quote.
  115.               </BLOCKQUOTE>
  116.  
  117.    <ADDRESS> ... </ADDRESS>  Information about the author and the document
  118.                                 itself (such as copyright, sources, last
  119.                                 update, acknowledgements, etc.).  Shouldn't
  120.                                 include lists or high-level tags (except <P>).
  121.                                 Often displayed as italic.
  122.  
  123.    <HR>                      Horizontal line (pseudo page-break).
  124.  
  125.    <PRE> ... </PRE>          Encloses block of text to be shown verbatim in
  126.                                 a fixed-width font (whitespace is significant).
  127.                                 This is the only way to do columns or aligned
  128.                                 tables in HTML 2.0.  The WIDTH= attribute
  129.                                 gives a display hint to browsers (the default
  130.                                 is WIDTH=80).  A <PRE>...</PRE> element cannot
  131.                                 contain any list or high-level tags except <HR>.
  132.  
  133.    <P>                       Begin a paragraph (the closing </P> tag is
  134.                                 optional).  Cannot contain lists, or any of the
  135.                                 above tags.  Use attributes ALIGN=CENTER or
  136.                                 ALIGN=RIGHT to control text position (this is
  137.                                 not yet a part of standard HTML 2.0).
  138.  
  139.    These high-level elements all imply both a preceding and a following
  140.  paragraph break (except after the optional </P> tag).
  141.  
  142.  
  143.  Lists:
  144.  
  145.    <UL><LI>... </UL>         Unordered list.
  146.    <OL><LI>... </OL>         Ordered list.
  147.    <MENU><LI>... </MENU>     Menu list (for brief items; not much used -- you
  148.                                  can also try <UL COMPACT> or <OL COMPACT>).
  149.    <DIR><LI>... </DIR>       Directory list (should be multi-column, but isn't
  150.                                  in most implementations).
  151.      <LI>                      Begins each item in the above lists.  An inline
  152.                                image can be used as a custom bullet (preceding
  153.                                the list item) using the attribute BULLET="URL".
  154.                                (This is not yet a part of standard HTML 2.0.)
  155.  
  156.    <DL><DT>... <DD>... </DL> Definition list.  Can also be useful for writing
  157.                                  dialogue (as in a play).  Use <DL COMPACT> for
  158.                                  tighter rendering.  There does not actually
  159.                                  have to be a <DD> for each <DT> or vice versa.
  160.      <DT>                      Begins each item title in DL.
  161.      <DD>                      Begins each item definition in DL.
  162.  
  163.    The list item closing tags </LI>, </DT>, and </DD> are optional.
  164.    Lists can be nested (i.e. included in an <LI>...</LI> item in a <UL>...</UL>
  165.  or a <OL>...</OL> list, or inside a <DD>...</DD> item in a <DL>...<DL> list).
  166.  List items are not supposed to directly contain <H1>-<H6> headings, <HR>, or
  167.  <ADDRESS> (though <LI> and <DD> elements can contain a <BLOCKQUOTE> or <FORM>
  168.  which itself includes them).
  169.  
  170.  
  171.  Hypertext Anchors/Links:
  172.  
  173.   <A NAME="..." HREF="URL"> ... </A>
  174.                              Creates a link (HREF=) or anchor (NAME=) or both.
  175.                                 (Less commonly used attributes are URN=,
  176.                                 REL=, REV=, TITLE=, and METHODS=.)  Non-HTML
  177.                                 resource types referenced in <A HREF="...">
  178.                                 links can be displayed by external viewers.
  179.                                 An anchor element MUST contain something other
  180.                                 than whitespace, or it won't work on many
  181.                                 browsers.
  182.  
  183.    It is better if text contained within a link element is not something
  184.  relatively meaningless like <A...>Click Here</A>, but rather something which
  185.  describes what the link is pointing to: <A...>Chelsea's cat Socks</A>.
  186.  (Remember that not everybody is using a mouse anyway, so the word "Select" is
  187.  preferable to "Click".)
  188.  
  189.    Anchors/links CANNOT BE NESTED, directly or indirectly, so that even code
  190.  like <A...>...<X>...<A...>... </A>...</X>...</A> is forbidden.  (In the
  191.  upcoming HTML3 language, the attribute ID="...", which will be able to be
  192.  used with most tags, will replace <A NAME="...">, so that almost any element
  193.  will be able to be the target of a link.)
  194.  
  195.  
  196.  Inline images:
  197.  
  198.   <IMG SRC="URL" ALT="...">  Inserts an image from the URL as part of the
  199.                                 surrounding text flow (if any); GIF 87a (.gif)
  200.                                 and X Bitmap (.xbm) formats are supported.
  201.                                 (JPEG's are supported by Netscape.)
  202.  
  203.               ALIGN=TOP      These attributes control the placement of short
  204.               ALIGN=MIDDLE      captions alongside an image (but will probably
  205.                                 not do what you expect in the middle of text).
  206.  
  207.               WIDTH=         Specify the width and height of the image in
  208.               HEIGHT=           pixels.  Greatly speed display of document in
  209.                                 Netscape (not yet part of standard HTML 2.0).
  210.  
  211.               ISMAP          The image is a clickable imagemap.
  212.  
  213.     Be sure to specify meaningful text in the ALT attribute value (for use in
  214.  non-graphic environments), especially if the image is in a link.  If the image
  215.  is purely decorative, use ALT="" to avoid annoying "[IMAGE]" clutter in Lynx.
  216.  
  217.     Using too many and too large inline bitmaps can be very inconsiderate,
  218.  especially on your home page and other pages that are linked to from outside,
  219.  (unless they are publicized as picture galleries).  Many people are using
  220.  14.4k modems, and it is particularly frustrating when with no advance warning
  221.  you have to wait for a lot of big .GIF's to load -- before you're even able to
  222.  decide whether or not there is actually anything of interest on the page.  In
  223.  any case, inline images will often be shown with few colors (only 50 in some
  224.  versions of Mosaic), whereas external images will be shown with the maximum
  225.  available number of colors -- so it is best to use a small sample (thumbnail)
  226.  as a link to the full size image.
  227.  
  228.  
  229.  Text flow:
  230.  
  231.    <BR>                      Forces a line break
  232.  
  233.  
  234.  Logical styles:
  235.  
  236.    <EM> ... </EM>            Emphasized (often rendered as italic).
  237.    <STRONG> ... </STRONG>    Strong emphasis (often rendered bold).
  238.    <CITE> ... </CITE>        Citation of book, article, movie, etc. (often
  239.                                 rendered italic).
  240.    <CODE> ... </CODE>        Piece of computer source code (often rendered in
  241.                                 fixed-width font).
  242.    <KBD> ... </KBD>          Example of keyboard entry (user input).
  243.    <SAMP> ... </SAMP>        Literal characters (e.g. computer output).
  244.    <VAR> ... </VAR>          Name of variable (often rendered as italic).
  245.    <DFN> ... </DFN>          Word to be introduced/defined (not yet part of
  246.                                 standard HTML 2.0).
  247.  
  248.  Fonts:
  249.  
  250.    <B> ... </B>              Bold font.
  251.    <I> ... </I>              Italic font.
  252.    <TT> ... </TT>            Typewriter (fixed-width) font.
  253.    <U> ... </U>              Underlined (not yet part of standard HTML 2.0; can
  254.                                 also create confusion with links, which are
  255.                                 rendered as underlined on many browsers).
  256.  
  257.    It is preferable to use logical styles rather than hard-wired fonts (bold,
  258.  italic, etc. may not be available in non-graphical environments, anyway).
  259.  Styles and fonts are NOT guaranteed to be rendered cumulatively (i.e.
  260.  <B><I>Text</I></B> may look the same as plain <I>Text</I>, and the italic
  261.  text in <H1>RomanText <I>ItalicText</I></H1> may not be the appropriate size
  262.  for a H1 heading).
  263.  
  264.    The logical style, font, and link/anchor elements generally can contain only
  265.  each other (and <IMG> and <BR>), and not lists and high-level tags.  The
  266.  headings <H1>-<H6>, <DT>...</DT> in a <DL>...</DL> list, and <LI>...</LI> in
  267.  MENU or DIR can also contain only these tags.  It is best not to have
  268.  whitespace after an opening tag of a style, font, or anchor element, or before
  269.  a closing tag (i.e. <B>Text</B> is preferable to <B> Text </B>); such
  270.  whitespace produces displeasing visual results on some browsers.
  271.  
  272.  
  273. Special Characters (Entities):
  274.  
  275.    &   or    &       &
  276.    <    or    <       <
  277.    >    or    >       >
  278.  
  279.     These three characters should be escaped with the above ampersand entities
  280.  everywhere in a document where they are not intended to be used with their
  281.  HTML meanings.  Other entities (such as "é" etc.) are available to
  282.  encode the alphabetic characters in positions 192-255 of the ISO 8859-1
  283.  Latin 1 character set for European languages.  Numeric entities can be used
  284.  for characters in the range 160-191 with some hope of success (such as ©
  285.  for the copyright symbol, since not all browsers understand ©).  Not all
  286.  browsers understand   or even treat   as a space -- a safe
  287.  alternative is   (but this will not act as non-breaking on most
  288.  browsers).  The range 127-159 is undefined in ISO 8859-1, and should not be
  289.  used.  A double-quote character must be escaped as " or " inside an
  290.  attribute value.  Characters in URL's are best escaped with %-hex-digits
  291.  (e.g. %26 for "&").
  292.  
  293.  
  294. Comments:
  295.  
  296.  <!-- comments go here -- >  The stuff in such a tag is ignored.  The final "--"
  297.                                 marks the end of the comment.  Theoretically,
  298.                                 a comment can include other HTML tags, but
  299.                                 you're much wiser NOT doing this, since many
  300.                                 implementations don't support it.  Some
  301.                                 implementations restrict comments to a single
  302.                                 line.
  303.  
  304.  
  305. URL's:
  306.  
  307.             General form:    protocol://host:port/path#anchor
  308.  
  309.    Where protocol is one of http, gopher, ftp, file, telnet, wais, news, mailto,
  310.  etc.  The "#anchor" is optional, and ":port" defaults to 80 if left out.
  311.  
  312.    A fully absolute URL contains a protocol prefix, and a full hostname for
  313.  external DNS resolution.
  314.  
  315.             Absolute URL:    http://myhost.edu/~myself/subdir/file.html#anchor
  316.  
  317.    A URL can be relative in several ways:
  318.  
  319.      Server-relative URL:    /~myself/subdir/file.html#anchor
  320.  
  321.    Document-relative URL:    subdir/file.html#anchor
  322.  
  323.  (Uses the protocol, host, and port of the current document.)
  324.  
  325.    Document-internal URL:    #anchor
  326.  
  327.    URL's which are document-relative, but specify something outside the current
  328.  directory (i.e. http URL's which contain a `/' character, but do not start with
  329.  a `/' character, after the optional protocol prefix) can sometimes confuse
  330.  browsers (especially relative URL's that start with "../" -- in general, ".."
  331.  will be interpreted in terms of the logical Web file system, rather than the
  332.  physical file system).
  333.  
  334.  
  335. Forms:
  336.  
  337.    To implement forms (or <ISINDEX> or <IMG ISMAP>) you need special HTTP-server
  338.  stuff outside your HTML file.
  339.  
  340.    <FORM ...> ... </FORM>    Encloses the entire form.
  341.               ACTION="URL"      The URL to use when the form is complete
  342.               METHOD=           GET or POST
  343.               ENCTYPE=          Mime type of representation of form data
  344.  
  345.    <INPUT ...>               Some type of input field.
  346.               TYPE=             Types are text, password, checkbox, radio,
  347.                                    submit, reset, image, hidden
  348.               NAME=             Name of the field
  349.               VALUE=            Value of button (label for submit and reset)
  350.               SRC="URL"         URL of inline image (image)
  351.               CHECKED           This item selected by default (checkbox/radio)
  352.               SIZE=             Displayed field width, in characters
  353.               MAXLENGTH=        Maximum field width, in characters
  354.               ALIGN=            Image alignment (image)
  355.  
  356.    <SELECT ...><OPTION ...> ... </SELECT>
  357.                              A list of items to select.
  358.               NAME=             Name of the field
  359.               SIZE=             Use scrollable list with SIZE # options shown
  360.               MULTIPLE          Multiple selections allowed
  361.  
  362.    <OPTION ...>              Precedes each item in the option list.  The
  363.                                    closing </OPTION> tag is optional.
  364.               SELECTED          This option is selected by default
  365.               VALUE=            Value
  366.  
  367.    <TEXTAREA ...> ... </TEXTAREA>
  368.                              A multiline text field.  The enclosed text is
  369.                                    the default value displayed in the field.
  370.               NAME=             Name of the field
  371.               ROWS=             Number of rows in the field
  372.               COLS=             Number of columns in the field
  373.  
  374.  
  375.    <FORM>...</FORM> is a high-level element, and so should not be contained
  376.  inside a heading, <ADDRESS>...</ADDRESS>, <PRE>...</PRE>, <P>, <DT>...</DT>,
  377.  style, font, or anchor element (or <LI>...</LI> in MENU or DIR).
  378.  <INPUT>, <SELECT>, and <TEXTAREA> should only be contained within a form.
  379.  Forms cannot be nested.
  380.  
  381. </quickreference>
  382.  
  383.